<template>
  <div class="login-container">
    <div class="title1">
      <div style="font-size: 40px"><h1>EasyCTBA</h1></div>
      <div style="font-size: 23px">基于微服务的课堂教学行为分析平台</div>
    </div>

    <el-card>
      <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" label-width="80px">
        <h1 class="title">账号密码登录</h1>
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" type="text" placeholder="请输入账号" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="iconfont icon-mima"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div style="display: flex; justify-content:space-between;">
            <el-input v-model="loginForm.code" size="large" placeholder="验证码" style="width: 63%" prefix-icon="iconfont icon-yanzhengyanzhengma"></el-input>
            <img :src="codeUrl" @click="getCode" alt="验证码" style="height: 40px; width: 35%"/>
          </div>

        </el-form-item>
        <el-form-item>
          <el-button v-waves type="primary" style="width: 60%;margin-left: 20px" @click="login">登录</el-button>
        </el-form-item>
        <el-link @click="register" :underline="false" style="float: right;margin-bottom: 10px">新用户注册</el-link>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import { login } from '@/api/login'
import { setToken } from '@/utils/auth'
import {getCodeImg} from "@/api/login";
import Waves from "@/directives/waves/waves";
export default {
  directives: { Waves },
  name:"LoginIndex",
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: 'admin123',
        code:'',
        uuid:''
      },
      codeUrl:'',
      captchaEnabled: true,
      token:'',
    }
  },
  methods: {
    register(){
      this.$router.push('/register')
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          login({
            username: this.loginForm.username,
            password: this.loginForm.password,
            code: this.loginForm.code,
            uuid:this.loginForm.uuid
          }).then(data => {
            this.token = data.data.access_token
            if (this.token) {
              setToken(this.token)

              //成功登录消息提示
              this.$notify({
                title: 'EasyCTBA',
                message: '登录成功！',
                type: 'success',
                duration: '2000',
                offset: 100
              });

              this.$router.push({ path: '/home' })
            }
          })
        }
      });
    },
    getCode() {
      getCodeImg().then( data =>{
        this.captchaEnabled=data.data.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + data.data.img;
          this.loginForm.uuid = data.data.uuid;
        }
      })
    },
  },
  beforeDestroy() {

  },
  mounted() {
    this.getCode();
  },
  computed:{
    rules(){
      return{
        rules: {
          username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
          password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
          code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
        },
      }
    }
  }
}
</script>

<style>
.title1{
  justify-content: center;
  align-items: center;
  color: white;
  display: flex;
  flex-direction: column;
  margin-right: 400px;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 200px;
}

.login-form {
  width: 400px;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

</style>

